<%--
  Created by IntelliJ IDEA.
  User: 96245
  Date: 2019/11/8
  Time: 23:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>JSP</title>
    <script src="lib/vue.js"></script>
    <script src="lib/vue-resource.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="sendQuestion">提交</button>
      <div>
        <ul>
          <li v-for="question in questions">
            {{question.problem}}<br/>
          </li>
        </ul>
      </div>
      <button @click="getMsg">获取</button>
      <div>
        {{person.name}}--{{person.age}}
      </div>
    </div>
  </body>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        questions:[
            {
              problem: 'I am a problem!',
              score: 0,
              options: [
                {
                  answer: '',
                  checked: false
                }
              ]
            }
          ],
        person:{
          name:'',
          age:'',
        }
      },
      methods:{
        sendQuestion(){
          this.$http.post('http://localhost:8080/web_3_JSP/MyServlet',this.questions)
                  .then(function () {
                    alert("send success")
                  },function () {
                    alert("send fail")
                  })
        },
        getMsg(){
          this.$http.get('http://localhost:8080/web_3_JSP/GetJson').then(
                  function (result) {
                    alert("get success");
                    console.log(result.body);
                    vm.person=result.body;
                    alert(result.body);
                  },function () {
                    alert("get fail");
                  }
          );
        }
      }
    })
  </script>
</html>
